<template>
  <div style="padding: 6px;">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="选择周" prop="week">
        <el-date-picker v-model="queryParams.week" type="week" placeholder="选择月" :picker-options="{'firstDayOfWeek': 1}" format="yyyy第WW周" value-format="yyyy-MM-dd" @change="loadWorkLog"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="loadWorkLog" v-if="false">查询</el-button>
        <el-button type="primary" icon="el-icon-plus"   size="mini" @click="addWorkLog">添加</el-button>
      </el-form-item>
    </el-form>

    <el-timeline>
      <el-timeline-item :timestamp="item.logDate" placement="top" v-for="(item,index) in workLogList">
        <el-card class="mycard">
          <div style="padding: 10px;" v-for="mx in item.logDateMx">
            <el-tag size="mini">{{mx.useHour}}小时</el-tag>&nbsp;&nbsp;<span class="logtext">{{mx.logText}}</span>
            &nbsp;&nbsp;
            <div style="float: right">
              <el-button size="mini" type="primary" @click="editWorkLog(mx.id)">修改</el-button>
              <el-button size="mini" type="danger"  @click="deleteWorkLog(mx.id)">删除</el-button>
            </div>
            <div style="clear: both"></div>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>

    <el-drawer :title="popupTitle" :visible.sync="entityDetailVisible" direction="rtl" size="35%">
      <workLogDetail v-if="entityDetailVisible" :visible.sync="entityDetailVisible" :entityId="popupEntityId"></workLogDetail>
    </el-drawer>
  </div>
</template>

<script>
import request from '@/utils/request'
import workLogDetail from './workLogDetail'
import dayjs from 'dayjs'
import weekday from "dayjs/plugin/weekday";
import "dayjs/locale/zh-cn";
dayjs.extend(weekday);
dayjs.locale('zh-cn')

export default {
  components: { workLogDetail },
  data() {
    return {
      queryParams: {
        week : dayjs().startOf('week').format("YYYY-MM-DD"),
        pageNum: 1,
        pageSize: 500
      },
      workLogList: [],

      entityDetailVisible : false,
      popupTitle : '',
      popupEntityId : 0,
    }
  },
  mounted() {
    this.loadWorkLog()
    this.$EventBus.$on("worklogadd", () => {
      this.queryParams.pageNum = 1;
      this.loadWorkLog();
    });
    this.$EventBus.$on("worklogedit", () => {
      this.loadWorkLog();
    });
  },
  beforeDestroy() {
    this.$EventBus.$off("worklogadd")
    this.$EventBus.$off("worklogedit")
  },
  methods: {
    loadWorkLog() {
      if(!this.queryParams.week){
        this.$message.warning("请选择日期")
        return
      }
      this.queryParams.week = dayjs(this.queryParams.week).startOf('week').format("YYYY-MM-DD")
      request({
        url: '/worklog/worklogweek',
        data: this.queryParams
      }).then(res => {
        const { data } = res
        this.workLogList = data
      })
    },
    addWorkLog(){
      this.popupEntityId = 0;
      this.popupTitle= "新增日志"
      this.entityDetailVisible= true
    },
    editWorkLog(id){
      this.popupEntityId= id;
      this.popupTitle= "修改日志"
      this.entityDetailVisible= true
    },
    deleteWorkLog(id){
      request({
        url: '/worklog/deleteworklog',
        data: {id : id}
      }).then(res => {
        if(res.code === '200') {
          this.$message.success(res.msg)
          this.loadWorkLog();
        }
      })
    }

  }
}
</script>
<style scoped>
::v-deep .mycard .el-card__body{
  padding: 0;
}
::v-deep .logtext{
  font-size: 12px;
  color: #666666;
  letter-spacing: 1px;
}
.el-button--mini, .el-button--mini.is-round{
  padding: 3px 6px;
  font-size: 14px;
}
</style>
